<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 3. 使用组件 -->
        <mycom></mycom>
    </div>
</body>
<script>

    // 1. 定义一个局部组件
    const myCom = {
        // 组件模板
        template: '<h1>{{message}}</h1>',
        data() {
            return {
                // 组件数据
                message: '春天到了，昨天都 30 度了。'
            }
        },
        // 组件函数
        methods: {},
        computed: {}
        // 原来组件中有的所有东西他都有
    }


    const app = {
        data() {
            return {}
        },
        methods: {},
        // 注册组件的地方
        components: {
            // 2. 局部注册组件
            mycom: myCom // 可以使用
            // myCom: myCom // 不能使用
            // MyCom: myCom // 大驼峰可以使用（用的时候要写成my-com）
            // 'my-com': myCom // 可以使用
            // Mycom: myCom // 可以使用

        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>